<template>
  <div id="home">
	<home-header :city=city></home-header>
	<home-swiper :list=swiperList></home-swiper>
	<home-icons :list=iconList></home-icons>
	<home-recommend :hotList=hotList :likeList=likeList></home-recommend>
	<home-week :list=weekList></home-week>
  </div>
</template>

<script>
	import HomeHeader from './components/header.vue'
	import HomeSwiper from './components/swiper.vue'
	import HomeIcons from './components/icons.vue'
	import HomeRecommend from './components/recommend.vue'
	import HomeWeek from './components/week.vue'
	import axios from 'axios'
export default {
  name: 'home',
  components:{
  	HomeHeader,
  	HomeSwiper,
  	HomeIcons,
  	HomeRecommend,
  	HomeWeek
  },
  mounted(){
  	this.getHomeInfo()
  },
  data(){
  	return{
  		city:'',
  		swiperList:[],
  		iconList:[],
  		hotList:[],
  		likeList:[],
  		weekList:[]
  	}
  },
  methods:{
  	getHomeInfo(){
  		axios.get('/api/index.json')
  			.then(this.getHomeSucc)
  	},
  	getHomeSucc(res){
  		res = res.data
  		if(res.ret&&res.data){
	  		this.city = res.data.City
	  		this.swiperList = res.data.swiperList
	  		this.iconList = res.data.iconList
	  		this.hotList = res.data.hotList
	  		this.likeList = res.data.likeList
	  		this.weekList = res.data.weekList
  		}
  	}
  }
}
</script>

<style scoped>
	#home{
		background-color: #eee;
	}
</style>
